<template lang="pug">
  section.panel
    div(class="top")
      h2 园区收入趋势
      <!--el-radio-group.trendType(v-model="curType")-->
        <!--el-radio(v-for="item in typeList" :key="item.value" :label="item.value") {{item.label}}-->
      .extra
        el-button(:class="{'gradientVertical': curDura === 'year'}" round @click="trendHandle('year', 'curDura')") 年
        el-button(:class="{'gradientVertical': curDura === 'month'}" round @click="trendHandle('month', 'curDura')") 月
    <div v-if="values.length===0" class="quesheng">
      <img src="@/assets/quesheng.png" alt="">
      <span>暂无数据</span>
    </div>
    .trendEcharts#trendEcharts(style="height: 480px")
</template>
<script>
import echartMixin from '@/mixins/echarts'
import { finIncomeCurveByYear, finIncomeCurveByMonth } from '@/api/dashboard'
export default {
  mixins: [echartMixin],
  data () {
    return {
      values: [],
      echartsId: 'trendEcharts',
      typeList: [
        { label: '收入', value: 'income' },
        { label: '支出', value: 'expenditure' },
        { label: '收费', value: 'charge' },
        { label: '退费', value: 'refund' }
      ],
      curType: 'income',
      curDura: 'year' // 周期，月-month，季-season，年-year,
    }
  },
  watch: {
    curType () {
      this.getData()
    },
    curDura () {
      this.getData()
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    // 切换集团趋势筛选条件
    trendHandle (value, type) {
      this[type] = value
    },
    getData () {
      const { curType, curDura } = this
      console.log(curType, curDura)
      if (curDura === 'month') {
        this.getMonthData()
      } else {
        this.getYearData()
      }
    },
    getTrendEcharts (values = []) {
      // const { typeList, curType } = this
      // const typeName = typeList.find(x => x.value === curType).label
      const show = values.length === 0
      const options = {
        title: {
          text: '暂时没有数据',
          show: show,
          top: 'center',
          left: 'center',
          textStyle: {
            fontSize: 24,
            lineHeight: 10
          }
        },
        grid: {
          top: 40,
          left: 60,
          right: 20,
          bottom: 20
        },
        xAxis: {
          type: 'category',
          data: values.map(x => x.created)
        },
        yAxis: {
          type: 'value'
        },
        lineStyle: {
          color: '#5470C6'
        },
        itemStyle: {
          color: '#5470C6'
        },
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'transparent',
          formatter: params => {
            const data = params[0]
            const dataIndex = data.dataIndex
            const item = values[dataIndex]
            return `<div class="echartsTooltop"><p>金额: ${item.totalAmount}元</p><p>收费账单数量: ${item.count}</p></div>`
          }
        },
        series: [
          {
            data: values.map(x => x.totalAmount),
            type: 'line',
            smooth: true
          }
        ]
      }
      this.$_chartMixin_init(options)
    },

    getYearData () {
      finIncomeCurveByYear().then(res => {
        console.log(res)
        this.values = res
        this.getTrendEcharts(res)
      })
    },

    getMonthData () {
      finIncomeCurveByMonth().then(res => {
        console.log(res)
        this.values = []
        this.getTrendEcharts([])
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.panel{
  background-color: #fff;
  padding: 24px;
  margin-top: 24px !important;
  + .panel{
  }

  .top{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;

    > h2 {
      margin: 0;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: bold;
      font-size: 18px;
      color: #000000;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }

    .extra {

    }

    .trendType{

    }
  }
}

.echartsTooltop{
  background: #fff;
  box-shadow: 0px 0px 32px 0px rgba(0, 0, 0, 0.02);
  border-radius: 20px;
  padding: 15px;
  position: relative;

  > h3 {
    font-size: 15px;
    margin: 0;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333;
    margin-bottom: 10px
  }

  > p{
    padding-left: 12px;
    font-size: 10px;
    font-family: PingFang SC;
    color: #999999;
    line-height: 20px;
    position: relative;

    &::before{
      content: '';
      display: block;
      position: absolute;
      left: 0;
      top: 50%;
      width: 5px;
      height: 5px;
      background: #999999;
      transform: rotate(45deg) translateY(-50%);
    }
  }
}
.empty{
  margin-top: 30px;
  margin-left: 20px;
}.quesheng {
   padding-top: 24px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   height: 100%;

   span {
     font-family: Source Han Sans SC, Source Han Sans SC;
     font-weight: 400;
     font-size: 16px;
     color: #333333;
     font-style: normal;
     text-transform: none;
     margin-top: 32px;
   }
 }
</style>
